<template>
    <div class="swhz">
        <div class="swhzSonTop">
         
            <p class="swhzSonTopTitle">商务合作</p>
            <p class="swhzSonTopFu">从创新理念到效果策略，我们致力于让客户在互联网与数字时代，实现品效运合一的营销方案。</p>           
             <img src="../../assets/img/7-商务合作/0.png" alt="" class="map">
            <div class="p-img" @click="tapTo('agent')">
              <p>代理合作</p>  
              <img src="../../assets/img/7-商务合作/1.png" alt="">     
            </div>
            <div class="p-img2" @click="tapTo('bigcustomer')">
              <p>大客户服务</p>
              <img src="../../assets/img/7-商务合作/2.png" alt="">
            </div> 
            <div class="p-img3" @click="tapTo('about')">
               <p :style="{animation:p3}">关于我们</p>
               <img src="../../assets/img/7-商务合作/3.png" alt="" :style="{animation:img3}">
            </div> 
            <div  class="p-img4" @click="tapTo('mediaIn')">
              <p :style="{animation:p4}">媒体入驻</p>
              <img src="../../assets/img/7-商务合作/4.png" alt="" :style="{animation:img4}">
            </div>
            
        </div>
	</div>
</template>
<script>
import moduleName from '../../assets/css/animate.css'
export default {
  data() {
    return {
      scrollRoute:"",
      p1:"",
      p2:"",
      p3:"",
      p4:"",
      img1:"",
      img2:"",
      img3:"",
      img4:""
    };
  },
  methods: {
    scroll() {
      this.scrollRoute =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
       if(this.scrollRoute>=4400){
        //  this.p1 = "topTwo 0.75s linear 0.5s 1 normal forwards running"
        //  this.p2 = "topFour 0.75s linear 0.75s 1 normal forwards running"
        //  this.p3 = "topOne 0.75s linear 0.25s 1 normal forwards running"
        //  this.p4 = "topThree 0.75s linear 0.5s 1 normal forwards running"
        //  this.img1 = "imgTwo 0.75s linear 0.5s 1 normal forwards running"
        //  this.img2 = "imgFour 0.75s linear 0.75s 1 normal forwards running"
        //  this.img3 = "imgOne 0.75s linear 0.25s 1 normal forwards running"
        //  this.img4 = "imgThree 0.75s linear 0.5s 1 normal forwards running"
       }
    },
    tapTo(e){
      this.$router.push('/' + e);
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scroll);
  }
};
</script>
<style scoped>
.swhz {
  width: 100%;
  overflow: hidden;
}
.swhzSonTop {
  width: 1200px;
  margin: 0 auto;
  height: 631px;
  position: relative;
  text-align: center;
  overflow: hidden;
  z-index:2;
}
.map{
  position: absolute;
  bottom:50px;
  width:120%;
  height:250px;
  z-index:-1;
  left:-100px;
}

.p-img{
  position: absolute;
   top: 240px;
  left: 150px;
   transition: all 0.5s;
}
.p-img:hover{
   transform: translateY(-10px);
   cursor: pointer;
}
.p-img p{
  font-size: 24px;
  color: rgb(34, 34, 34);
}
.p-img2{
  position: absolute;
  top: 282px;
  left: 380px;
  transition: all 0.5s;
}
.p-img2:hover{
    transform: translateY(-10px);
   cursor: pointer;    
}
.p-img2 p{
 font-size: 22px;
  color: #444444;
}
.p-img3{
  position: absolute;
  top: 274px;
  left: 640px;
  transition: all 0.5s;
}
.p-img3:hover{
    transform: translateY(-10px);
   cursor: pointer;
}
.p-img3 p{
 font-size: 22px;
  color: #444444;
}
.p-img4{
  position: absolute;
   top: 223px;
  right: 275px;
   transition: all 0.5s;
}
.p-img4:hover{
    transform: translateY(-10px);
   cursor: pointer;
}
.p-img4 p{
 font-size: 22px;
  color: #444444;
}
.swhzSonBottom {
  width: 100%;
  height: 520px;
  background-color: #f8f9fd;
  overflow: hidden;
}
.swhzSonBottomContainer {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}
.swhzSonTopTitle {
  font-size: 30px;
  color: rgb(34, 34, 34);
  margin-top: 80px;
}
.swhzSonTopFu {
  font-size: 16px;
  color: rgb(34, 34, 34);
  margin-top: 25px;
  font-weight: 100;
}
/* .swhzSonTop p:nth-child(3) {
  font-size: 24px;
  color: rgb(34, 34, 34);
  position: absolute;
  top: 240px;
  left: 150px;
}
/* .swhzSonTop p:nth-child(4) {
  font-size: 22px;
  color: #444444;
  position: absolute;
  top: 282px;
  left: 380px;
}
.swhzSonTop p:nth-child(5) {
  font-size: 22px;
  color: #444444;
  position: absolute;
  top: 274px;
  left: 640px;
}
.swhzSonTop p:nth-child(6) {
  font-size: 22px;
  color: #444444;
  position: absolute;
  top: 223px;
  right: 275px;
} */
.swhzSonTop img:nth-child(7) {
  position: absolute;
  top: 277px;
  left: 150px;
}
.swhzSonTop img:nth-child(8) {
  position: absolute;
  top: 325px;
  left: 380px;
}
.swhzSonTop img:nth-child(9) {
  position: absolute;
  top: 316px;
  left: 640px;
}
.swhzSonTop img:nth-child(10) {
  position: absolute;
  top: 268px;
  right: 275px;
}
</style>


